<template>
  <div class="operation-record-view">
    <el-timeline style="margin-left: 10px;margin-top:10px">
      <el-timeline-item
        v-for="(item,index) in list"
        :key="index"
        :icon="item.icon"
        :type="item.type"
        size="large"
      >
        <div class="operation-item">

          <div class="item-top">
            <p>{{ item.taskAssignee }}<span v-if="item.taskDeptName">[{{ item.taskDeptName }}]</span></p>
            <p style="margin-left:20px">{{ item.taskName }}</p>
            <p style="margin-left:20px">{{ getLabel("approval_result", item.taskConclusion) }}</p>
            <!-- <p style="margin-left:20px">{{item.taskName}}</p>
             <p style="margin-left:20px">{{item.message}}</p> -->
          </div>
          <div
            v-if="item.message!=''"
            class="item-top"
          >
            <p>审批意见：{{ item.message }}</p>
          </div>
          <!--附件-->
          <div
            v-if="item.files&&item.files.length"
            class="files-container"
          >
            <div>附件：</div>
            <div class="files">
              <div
                v-for="(itm) in item.files"
                :key="itm.id"
                class="files-item"
              >
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handlDownload(itm)"
                >
                  {{ itm.name }}
                </el-link>
              </div>
            </div>
          </div>

          <div class="item-bottom">
            <p class="date">{{ dateFormat('yyyy-mm-dd HH:MM', item.endTime) }}</p>
            <p>{{ item.people }}</p>
            <p>{{ item.dep }}</p>
          </div>

        </div>
      </el-timeline-item>
    </el-timeline>

  </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
import {downloadFile} from '@/utils/downloadFile'

export default defineComponent({
  name: 'Operation',
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  setup() {
    const datas = ref([])
    const handlDownload = (url) => {
      downloadFile(url.url)
    }

    return {
      datas,
      handlDownload,
    }
  },
})
</script>

<style lang="scss" scoped>
  .operation-record-view {
    .operation-item {
      .item-top {
        display: flex;
        padding-bottom: 10px;

        .audit-no {
          padding-left: 20px;

          span {
            color: #00afff;
          }
        }
      }

      .files-container {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
      }

      .item-center {
        padding-bottom: 10px;

        .changeBtn {
          color: #00afff;
          padding-left: 20px;
        }
      }

      .item-bottom {
        display: flex;

        .date {
          padding-right: 20px;
        }
      }
    }
  }
</style>
